<!DOCTYPE html>
<!-- NOTE: If doctype is removed, dialog positioning breaks. -->

<head>
	<title>inzyme</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="/js/jquery-ui-1.10.3.min.js"></script>
	<script type="text/javascript" src="/js/jquery.jeditable.mini.js"></script>
	<script type="text/javascript" src="/js/jquery.autosize-min.js"></script>
	<script type="text/javascript" src="/js/nprogress.js"></script>
	<script type="text/javascript" src="/js/jquery.wheelzoom.js"></script>
	<script type="text/javascript" src="/js/marked.js"></script>
	<script type="text/javascript" src="/js/tabula.js"></script>
	<script type="text/javascript" src="/js/simpleMenu.js"></script>
	<script type="text/javascript" src="/js/inzyme.js"></script>

	<link rel="stylesheet" type="text/css" href="/style/jquery-ui-smoothness-1.10.3.css"/>
	<link rel="stylesheet" type="text/css" href="/style/style.css">
	<link rel="stylesheet" type="text/css" href="/style/nprogress.css">

</head>

<body>
<div id="header">
	<h1 id="logo"><a href="/"></a></h1>
	<div>
		<button id="expr_home" class="expr_button"></button>
		<button id="expr_cancel" class="expr_button"></button>
		<button id="expr_finish" class="expr_button"></button>
	</div>
	<div id="toolbar">
		<button id="new_item_button">Add</button><ul></ul>
		<button id="edit_item_button">Edit</button>
	</div>

	<form id="search_form"><table class='layout'><tr>
		<td width="100%"><input autofocus id="search" type="text" /></td>
		<td><input id="search_submit" type="submit" value="Search" /></td>
	</tr></table></form>
	
</div>

<div id="start_page">

	<div id="user_tile">
		<h1>User information</h1><p></p>
	</div>

	<div id="groups_tile">
		<h1>Group memberships</h1><ul></ul>
	</div>
	
	<div id="experiments_tile">
		<h1>Recent experiments</h1><ul></ul>
	</div>

	<div id="protocols_tile">
		<h1>Your protocols</h1><ul></ul>
	</div>

</div>

<div id="search_results" class="ui-tabs hidden">
<ul id="tab_bar" class="ui-tabs-nav on_top"></ul>
<div id="tab_content" class="ui-tabs-panel"></div>
</div>
	
<div id="dialog_edit_items">
	<!-- Something for browser to focus on -->
	<p tabindex='1'></p>
	<h1></h1>
    <form id="edit_items_form"></form>
</div>

<div id="dialog_add_protocol">
	<select id="protocol_type_select">
		<option >Select Protocol Type</option>
		<option value="Protocol">Protocol</option>
		<option value="Add_Item">Add Item Protocol</option>
		<option value="Add_Linker">Add Linked Item Protocol</option>
	</select>
	<br>
	<br>
	<div id="protocol_type_Protocol" class="protocol_type">
		<div id='protocol_tabs'>
			<ul>
				<li><a href='#add_protocol_settings'>Protocol settings</a></li>
				<li><a href='#add_protocol_instr'>Protocol instructions</a></li>
			</ul>
			<div id='add_protocol_settings' class="protocol_settings">
				<p><label class='block' for='protocol_name_text'>Protocol name</label>
				<textarea class='big' name='protocol_name_text' rows='1'></textarea> </p>
				<p class="normal_protocol_settings"><label class='block' for='protocol_desc_text'>Protocol description</label>
				<textarea class='big' name='protocol_desc_text' rows='4'></textarea> </p>
				<p id="protocol_options"><label class='block' for='protocol_settings_text'>Protocol settings</label>
				<textarea class='big' name='protocol_desc_text' rows='17'>
input Tissue {
	Type = 'Tissue' 
	Quantity > 0.000015
	isVolume(Quantity)
	prefer Quantity > 0.00005
}

output Tissue -> DNA extract {
	Tissue: link
	Quantity: volume(3 * Quantity)
	Concentration: concentration(Quantity / 15) 
}

output Tissue -> RNA extract {
	Tissue: link
	Quantity: volume(5 * Quantity)
}

modify Tissue {
	Quantity: mass(Quantity - 0.1)
}

settings {
	Kit: ['Qiagen DNA extraction kit', 'Illumina miRNA extraction kit'] 
	Do phase X: true 
	Trizol density: 10 ml - 25 ml
	water type: ['pure','tap']
}
				</textarea> </p>

			</div>
				<div id='add_protocol_instr' class="protocol_instr">
					<p class="normal_protocol_settings"><label class='block' for='protocol_instr_text'>Protocol Instructions</label>
					<textarea class='big' name='protocol_instr_text' rows='25'>
{table Tissue}
Trizol: volume(3*Quantity)
Water: volume(5*Quantity)
{end}
					</textarea> </p>
			</div>
		</div>
	</div>

</div>

<div id="dialog_message"></div>
<div id="dialog_download">
	<p>Table will be downloaded as a .tsv file to default location. (Usually Downloads folder)</p>
	<p><label for="download_name">Select Filename</label> <input type="text" name="download_name" id="download_name"> <button id="download_button">Save</button> </p>
	<p id="download_link_holder" class="hidden"></p>
</div>

<div id="dialog_microscope" style="margin: 0px auto;">
	<img src=""></img>
</div>

<div id="experiment_wrapper" class="experiment_wrapper">
	<div id="protocol_title">
		<p></p>
		<!-- Icons from Iconic (http://somerandomdude.com/work/iconic/) -->
		<img id="protocol_info" class="protocol_icon" src="/images/info.svg" height="23" width="23">
		<img id="protocol_gear" class="protocol_icon" src="/images/cog.svg" height="23" width="23">
		<img id="protocol_cancel" class="protocol_icon" src="/images/x.svg" height="23" width="23">
		<img id="protocol_start" class="protocol_icon" src="/images/play.svg" height="23" width="23">
		<div id="bin_counters"></div>
	</div>

	<div id="protocol_settings" >
	</div>

</div>

<div id="dialog_excel_upload">
	<!-- Something for browser to focus on -->
	<p tabindex='1'></p>
	<p>Excel file contained <span></span> items with following attributes:</p>
	<ul></ul>
	<p>If this is incorrect please click cancel and fix the excel file otherwise click save.</p>
</div>

</body></html>
